<template>
  <div class="registration-container">
    <div class="page-header">
      <h2>入院登记</h2>
    </div>
    
    <div class="content-wrapper">
      <div class="action-buttons">
        <el-button type="primary" @click="submitForm">登记</el-button>
        <el-button @click="resetForm">清空</el-button>
      </div>
      
      <el-form :model="form" label-position="left" :rules="rules" ref="registrationForm">
        <div class="form-section">
          <h3>基本信息</h3>
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="住院号" prop="hospitalNo" required>
                <el-input v-model="form.hospitalNo" placeholder="请输入住院号" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="姓名" prop="name" required>
                <el-input v-model="form.name" placeholder="请输入姓名" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="身份证号" prop="idCard" required>
                <el-input v-model="form.idCard" placeholder="请输入身份证号" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="年龄" prop="age" required>
                <el-input-number v-model="form.age" :min="0" :max="150" controls-position="right" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="出生日期" prop="birthDate" required>
                <el-date-picker 
                  v-model="form.birthDate" 
                  type="date" 
                  placeholder="请选择出生日期"
                  format="YYYY-MM-DD"
                  value-format="YYYY-MM-DD"
                  style="width: 100%"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="性别" prop="gender" required>
                <el-select v-model="form.gender" placeholder="请选择性别" style="width: 100%">
                  <el-option label="男" value="男" />
                  <el-option label="女" value="女" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="家庭住址" prop="address">
                <el-input v-model="form.address" placeholder="请输入家庭住址(可选)" />
              </el-form-item>
            </el-col>
          </el-row>
        </div>
        
        <div class="form-section">
          <h3>登记信息</h3>
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="结算类别" prop="settlementType" required>
                <el-select v-model="form.settlementType" placeholder="请选择结算类别" style="width: 100%">
                  <el-option label="医保" value="医保" />
                  <el-option label="自费" value="自费" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="工作状态" prop="workStatus" required>
                <el-select v-model="form.workStatus" placeholder="请选择工作状态" style="width: 100%">
                  <el-option label="在职" value="在职" />
                  <el-option label="退休" value="退休" />
                  <el-option label="无业" value="无业" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="入院时间" prop="admissionDate">
                <el-date-picker 
                  v-model="form.admissionDate" 
                  type="datetime" 
                  placeholder="请选择入院时间"
                  format="YYYY-MM-DD HH:mm:ss"
                  value-format="YYYY-MM-DD HH:mm:ss"
                  style="width: 100%"
                  disabled
                />
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';
import { ElMessage } from 'element-plus';

// 表单数据
const form = reactive({
  hospitalNo: '',
  name: '',
  idCard: '',
  age: 0,
  birthDate: '',
  gender: '男',
  address: '',
  settlementType: '医保',
  workStatus: '在职',
  admissionDate: new Date().toISOString().slice(0, 19).replace('T', ' ')
});

// 表单验证规则
const rules = {
  hospitalNo: [
    { required: true, message: '请输入住院号', trigger: 'blur' },
    { min: 5, max: 20, message: '长度在 5 到 20 个字符', trigger: 'blur' }
  ],
  name: [
    { required: true, message: '请输入姓名', trigger: 'blur' }
  ],
  idCard: [
    { required: true, message: '请输入身份证号', trigger: 'blur' },
    { pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/, message: '请输入正确的身份证号', trigger: 'blur' }
  ],
  age: [
    { required: true, message: '请输入年龄', trigger: 'blur' }
  ],
  birthDate: [
    { required: true, message: '请选择出生日期', trigger: 'change' }
  ],
  gender: [
    { required: true, message: '请选择性别', trigger: 'change' }
  ],
  settlementType: [
    { required: true, message: '请选择结算类别', trigger: 'change' }
  ],
  workStatus: [
    { required: true, message: '请选择工作状态', trigger: 'change' }
  ]
};

const registrationForm = ref(null);

// 提交表单
const submitForm = () => {
  registrationForm.value.validate((valid) => {
    if (valid) {
      ElMessage.success('登记成功');
      console.log('表单数据:', form);
    } else {
      ElMessage.error('请完善表单信息');
      return false;
    }
  });
};

// 重置表单
const resetForm = () => {
  registrationForm.value.resetFields();
  form.admissionDate = new Date().toISOString().slice(0, 19).replace('T', ' ');
  ElMessage.info('表单已重置');
};

onMounted(() => {
  console.log('入院登记组件已加载');
});
</script>

<style scoped>
.registration-container {
  width: 100%;
  height: 100%;
  padding: 20px;
}

.page-header {
  margin-bottom: 20px;
  padding-bottom: 15px;
}

.page-header h2 {
  font-size: 20px;
  font-weight: 500;
  color: #303133;
  margin: 0;
}

.content-wrapper {
  background-color: #fff;
  padding: 20px;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.action-buttons {
  margin-bottom: 20px;
  text-align: right;
}

.form-section {
  margin-bottom: 30px;
}

.form-section h3 {
  font-size: 16px;
  font-weight: 500;
  color: #303133;
  margin-bottom: 20px;
}

:deep(.el-form-item__label) {
  font-weight: 500;
}

:deep(.el-form-item__label.is-required:before) {
  content: '*';
  color: #f56c6c;
  margin-right: 4px;
}
</style> 